<!DOCTYPE html>
<html lang="en-US" xmlns:th="http://www.thymeleaf.org">

    <!--通用head-->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <!--载入效果css-->
        <link th:href="@{/asserts/css/loading.css}" rel="stylesheet">

        <link rel="apple-touch-icon" sizes="76x76" href="../asserts/img/apple-icon.png">
        <link rel="icon" type="image/png" href="../asserts/img/favicon.png">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
        <!--字体和图标文件-->
        <link th:href="@{/asserts/fonts/fonts.css}" rel="stylesheet" />
        <link th:href="@{/asserts/css/all.css}" rel="stylesheet">
        <!--CSS文件-->
        <link th:href="@{/asserts/css/bootstrap.css}" rel="stylesheet" />
        <link th:href="@{/asserts/css/bootstrap-grid.css}" rel="stylesheet" />

        <!--登录页面专用css-->
        <link th:href="@{/asserts/css/signin.css}" rel="stylesheet">
        <style>

            #login_form{
                background-size: cover;
                overflow: hidden;
                position     : relative;
                background: rgba( 0, 0, 0, 0.3 );
                box-shadow: 0 8px 32px 0 rgba( 0, 0, 0, 0.5 );
                -webkit-backdrop-filter: blur( 10.0px );
                border-radius: 10px;
                border: 1px solid rgba( 255, 255, 255, 0.18 );
                display: none;
            }


        </style>
    </head>



<body class="text-center" th:style="'background:url(' + @{/asserts/img/index_bg.jpg} + ') no-repeat center center;width:100%;height:100%;'">

<!--载入效果 background: rgba(255, 255, 255, 0.3)-->
<div class="loadingio-spinner-spin-3z0g4hfb5b8" id="loading">
    <div class="ldio-zk1gtrwp5zo">
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>
</div>


<div id="login_form">
    <!--跳转路径-->
    <form class="form-signin"  th:action="@{/login}" id="main" method="post" style=""
          onsubmit="return loginBtn_click();">
        <div style="padding-bottom: 30px" >
        <img class="mb-4" th:src="@{/asserts/img/cet_logo.png}" alt="" width="82" height="82">
        <h1 id="regbutton" class="h3 mb-3 font-weight-normal text-white" th:text="#{login.title}"></h1>
        <!--如果msg的值为空 则不显示信息-->
        <p style="color: red" th:text=" ${msg} " th:if="${not #strings.isEmpty(msg)}"></p>
        </div>
            <input type="text" id="username" name="username" class="form-control" th:placeholder="#{login.username}" required="" autofocus="">
            <hr>
            <input type="password" name="password" id="password" class="form-control" th:placeholder="#{login.password}" required="">
        <div class="checkbox mb-3"><input type="checkbox" id="remember-me" checked>
            <label id="remember">
                 [[#{login.remember}]]
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}" id="loginSubmit"></button>

        <a class="btn btn-lg btn-success btn-block" data-toggle="modal" id="registerBtn" data-target="#registerModal" style="color: white" th:text="#{login.register}"></a>

        <p class="mt-5 mb-3 text-dark">© 2020-2021</p>
        <a class="btn btn-sm" onclick="setLanguage('zh-cn')">中文</a>
        <a class="btn btn-sm" onclick="setLanguage('en-us')">English</a>

    </form>
    <!--模态注册框-->
    <div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="opacity:0.9;margin-top: 7rem">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">注册新用户</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!--注册表单-->
                        <div class="form-group">
                            <input type="text" name="username" class="form-control" placeholder="账号" id="register-username">
                        </div>

                        <div class="form-group">
                            <input type="password" class="form-control" placeholder="密码" id="register-password">
                        </div>

                        <div class="form-group">
                            <input type="password" name="password" class="form-control" placeholder="确认密码" id="register-checkpassword">
                        </div>
                        <div class="modal-footer">
                            <div style="color: red;margin: 0 auto;" id="regtip">[[${regmsg}]]</div>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal" id="dismiss">返回</button>
                            <button type="button" onclick="check()" class="btn btn-primary" id="regSubmit">注册</button>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <!--引用通用JS-->
    <div th:insert="~{common::footerJs}"></div>


    <script>
        <!--加载效果淡出-->
        $("#loading").fadeOut(800);
        <!--登录表单淡入-->
        $("#login_form").fadeIn(1500);

    </script>






<script type="text/javascript">

    var regbutton = document.getElementById('regbutton');
    var usernameinput = document.getElementById('username');
    var passwordinput = document.getElementById('password');
    var remember = document.getElementById('remember');
    var loginSubmit = document.getElementById('loginSubmit');
    var registerBtn = document.getElementById('registerBtn');

    var exampleModalLabel = document.getElementById('exampleModalLabel');
    var regUser = document.getElementById('register-username');
    var regPassword = document.getElementById('register-password');
    var regCheckPassword = document.getElementById('register-checkpassword')
    var regDismiss = document.getElementById('dismiss');
    var regSub = document.getElementById('regSubmit');

    $(document).ready(function(){
        var strName = localStorage.getItem('keyName');
        var strPass = localStorage.getItem('keyPass');
        if(strName){
            $('#username').val(strName);
        }if(strPass){
            $('#password').val(strPass);
        }

    });

    function loginBtn_click(){
        var strName = $('#username').val();
        var strPass = $('#password').val();
        localStorage.setItem('keyName',strName);
        if($('#remember-me').is(':checked')){
            localStorage.setItem('keyPass',strPass);
        }else{
            localStorage.removeItem('keyPass');
        }
    }

    function setLanguage(selectLanguage) {
        if (selectLanguage=='zh-cn'){
            document.title = 'CET考试报名管理系统';
            regbutton.innerHTML = 'CET考试报名管理系统';
            usernameinput.placeholder = '用户名';
            passwordinput.placeholder = '密码';
            remember.innerHTML = '记住我';
            loginSubmit.innerHTML = '登录';
            registerBtn.text = '注册';

            exampleModalLabel.innerText = '注册新用户';
            regUser.placeholder = '用户名';
            regPassword.placeholder = '密码';
            regCheckPassword.placeholder = '确认密码';
            regDismiss.innerText = '返回';
            regSub.innerText = '注册';
        }
        else if (selectLanguage=='en-us'){
            document.title = 'CET Management System';
            regbutton.innerHTML = 'CET Management System';
            usernameinput.placeholder = 'UserName';
            passwordinput.placeholder = 'Password';
            remember.innerHTML = 'Remember me';
            loginSubmit.innerHTML = 'Login';
            registerBtn.text = 'Register';

            exampleModalLabel.innerText = 'Register New User';;
            regUser.placeholder = 'UserName';
            regPassword.placeholder = 'Password';
            regCheckPassword.placeholder = 'Confirm Password';
            regDismiss.innerText = 'Return';
            regSub.innerText = 'Register';
        }
    }

    <!--注册账号-->
    function check() {
        let username = $("#register-username").val();
        let password = $("#register-password").val();
        let checkpassword = $("#register-checkpassword").val();

        $.ajax({
            url: '/register',
            data: {
                username: username,
                password: password,
                checkpassword: checkpassword
            },
            method:'post',
            success:function(response){
                $("#regtip").text(response);
                if(response==='注册成功！'){
                    // $("#dismiss").click();
                    // $("#regbutton").text("注册成功!").css('color','lightgreen');
                    $(":input[name='username']").val(username);
                }
            }
        })
    }

    </script>

</body>



</html>